<template>
  <el-container>
    <!--头部-->
    <el-header>
      <div>
        <img src="../assets/logo.png" alt="">
        <span>MM有限公司管理平台</span>
      </div>
      <button @click="exit">退出</button>
    </el-header>
    <el-container>
      <!--侧边栏-->
      <!--绑定了宽度变化-->
      <el-aside :width="isCollapse?'50px':'200px'" >
        <div class="put"   @click="changeCollapse">|||</div>
        <!--菜单-->
         <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" unique-opened :collapse='isCollapse' :collapse-transition=false router>
          <!--unique-opened:允许一个菜单展开 router：允许 用inde作为path路由跳转:index="'/'+itemList.path" collapse：展开折叠-->
           <el-submenu :index="item.id+''" v-for='item in menuList' :key='item.id' >
             <template slot="title">
               <i :class="iconList[item.id]"></i>
              <span>{{item.authName}}</span>
             </template>
            <el-menu-item-group v-for='itemList in item.children' :key='itemList.id' >
              <el-menu-item :index="'/'+itemList.path">{{itemList.authName}}</el-menu-item>
            </el-menu-item-group>
           </el-submenu>
         </el-menu>
      </el-aside>
      <!--内容主题-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>


export default {
  created(){
    this.getMenu();
  },
  //销毁本地的token  完成退出
  data(){
    return {
      menuList:[],
      iconList:{125:"el-icon-user",103:"el-icon-star-on",101:"el-icon-s-goods",102:"el-icon-plus"},
      isCollapse:false
    }
  },
  
  methods:{
    changeCollapse(){
      this.isCollapse=!this.isCollapse
    },
    exit(){
      //退出 清除本地缓存 转换路由
      window.sessionStorage.clear();
      this.$router.push('/login');
    },
    //发送get请求 获取菜单选项内容
   async getMenu(){
    const {data:res}=await this.$http.get('menus')
     if(res.meta.status!=200) return this.$message.error('还回数据错误')
     this.menuList=res.data
   }
  }
}
</script>
<style lang="less" >
.el-container{
    height: 100%;
    width: 100%;
  }
.el-header{
    background-color: #B3C0D1;
    color: #333;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding:5px 10px 5px 10px;
    position: relative;
    div{
      display: flex;
      img{
      width: 60px;
      }
      span{
        display: inline-block;
        line-height: 60px;
        margin-left: 20px;
      }
    }
    button{
      display: inline-block;
      position: absolute;
      bottom: 10px;
      right: 20px;
      width: 50px;
      height: 20px;
      border: 1px solid gray;

    }
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    height: 100%;
    .el-menu{
      border-right:none
    }
  }
  .put{
    line-height: 25px;
    letter-spacing: 0.2em;
    background-color: #D3DCF3;
    font-size:10px;
    cursor: pointer;
    }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    // line-height: 160px;
    height: 100%;
  }
   
</style>
